<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'finance.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'finance.breadcrumb.settlementPeriod' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <div class="da-list-container">
      <div class="da-list-header">
        <div class="d-input">
          <div class="inputIn">
            <input dTextInput style="width: 180px;" [error]="false" placeholder="收/付账期" name="filterRole"
              [(ngModel)]="filterData.Name">
            <d-select style="width: 180px;" [options]="selectoptions" [(ngModel)]="filterData.SearchStatus"
              name="selectvalue" placeholder="收付款"></d-select>
          </div>
          <div class="d-submit">
            <d-button id="primaryBtn" style="margin-left: 8px" (btnClick)="filter()"><i
                class="icon icon-filter-o me-2"></i>查询</d-button>
            <d-button bsStyle="common" (btnClick)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
          </div>
        </div>
        <div class="btn-group">
          <div class="btn-left">
            <d-button bsstyle="primaryBtn" (click)="Creat()"> <i class="icon icon-add me-2"></i>新增</d-button>
          </div>
        </div>
      </div>
      <div class="list-content">
        <d-data-table [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
          [tableWidthConfig]="tableWidthConfig" [tableOverflowType]="'auto'" [scrollable]="true"
          (checkAllChange)="getCheckedRows()" (rowCheckChange)="getCheckedRows()" [resizeable]="true">
          <thead dTableHead [checkable]="true">
            <tr dTableRow>

              <th dHeadCell *ngFor="let colOption of dataTableOptions.columns">{{ colOption.header }}</th>

            </tr>
          </thead>
          <tbody dTableBody>
            <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
              <tr dTableRow>
                <td dTableCell>
                  <d-checkbox [disabled]="false" [showAnimation]="true" [ngModelOptions]="{ standalone: true }"
                    [ngModel]="rowItem.$checked" dTooltip [halfchecked]="rowItem.$halfChecked" [showGlowStyle]="false"
                    (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"></d-checkbox>
                </td>
                <td dTableCell [rowItem]="rowItem">
                  <span (click)="Edit(rowItem)"><a class="devui-link ms-3">编辑</a></span>
                  <span class="ms-3"><a class="devui-link-danger" (click)="Delete(rowItem)">删除</a></span>
                </td>
                <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                  <span dTooltip [content]="rowItem?.collectionPeriodName">{{ rowItem?.collectionPeriodName}}</span>
                </td>
                <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                  <span dTooltip [content]="rowItem?.rowItem?.receiptOrPayment | booleanToText:'收':'付'"><d-tag [tag]=" rowItem?.receiptOrPayment | booleanToText:'收':'付'"
                      [labelStyle]="rowItem?.receiptOrPayment"></d-tag></span>
                </td>
                <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                  <span dTooltip [content]="rowItem?.collectionPeriodDuration&&rowItem.collectionPeriodClass | booleanToText:'月':'日' ">{{ rowItem?.collectionPeriodDuration}}{{rowItem.collectionPeriodClass | booleanToText:'月':'日'}}</span>
                </td>
                <td dTableCell [rowItem]="rowItem" [field]="'showType'">
                  <span dTooltip [content]="rowItem?.note">{{ rowItem?.note}}</span>
                </td>
              </tr>
            </ng-template>
          </tbody>
        </d-data-table>
      </div>
      <div class="page-footer">
        <div>
          <p>已选 <span class="underline">{{checkedIds.length}}</span> 条
            <a (click)="cleared()" class="cleared">清空</a>
          </p>
        </div>
        <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [canJumpPage]="true" [maxItems]="5"
          [total]="this.pager.total" [pageSizeOptions]="this.pageSizeOptions" [(pageSize)]="filterData.PageSize"
          [(pageIndex)]="filterData.PageNumber" (pageIndexChange)="pageIndexChange($event)"
          (pageSizeChange)="pageSizeChange($event)">
        </d-pagination>
      </div>
    </div>
  </div>
</div>
<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
